<template>
    <div>
        <!-- 选择品牌 -->
        <el-dialog v-model="props.showChooseBrand" title="选择品牌" :before-close="beforeClose">
            <el-input v-model="name" style="width: 240px;" placeholder="品牌名称搜索" size="small" class="el-input__inner">
                <template #append>
                    <el-button :icon="Search" @click="onSearch" />
                </template>
            </el-input>
            <el-table align="center" :data="tableData" ref="multipleTableRef" style="width: 100% ;"
                @selection-change="handleSelectionChange" :border="true">
                <el-table-column align="center" type="selection" width="100">
                    <template #default="scope">
                        <div>
                            <el-checkbox v-model="addProudect" @change="changeAddProudect" size="large" />
                        </div>
                    </template>

                </el-table-column>>
                <el-table-column align="center" prop="name" label="品牌名称" width="550" />
                <el-table-column align="center" label="相关" width="260">
                    <template #default="scope">
                        <div>商品: 评价:
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pager">
                <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" background
                    :page-sizes="[5]" layout="prev, pager, next" :total="pagination.total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
            <template #footer>
                <span>
                    <el-button @click="chooseBrand">取消</el-button>
                    <el-button type="primary" @click="onConfirm">确定</el-button>
                </span>
            </template>
        </el-dialog>

    </div>
</template>

<script setup lang="ts">
import { reactive, ref, defineProps, withDefaults } from 'vue'
import { Search } from '@element-plus/icons-vue'
// 封装数据处理函数
import useTable from '../../../hooks/useTables'
// 导入请求接口
import * as api from '../../../request/api'

const name = ref('')

// const gridData = reactive({}) as Ref<>
const addProudect = ref<true | false>(false)

// 接收父组件的数据
let props = withDefaults(
    defineProps<{
        showChooseBrand: boolean;
    }>(),
    {
        showChooseBrand: false,
    }
)
// 自定义事件
let emits = defineEmits<{
    (event: 'chooseBrand'): void;

}>()
// 关闭弹出框的回调
let beforeClose = () => {
    name.value = ''
    chooseBrand()
}
// 取消
let chooseBrand = () => {
    emits("chooseBrand")
}

let changeAddProudect = () => {
    // console.log(e);

}
// 确定
let onConfirm = () => {
    // 将参数返回给父级 ，让父级发请求完成功能
    // emits('confirm', ownForm.value)
    // console.log("addProudect", addProudect);
    name.value = ''
    chooseBrand()
}

// 弹出框选择商品的数据
//数据请求展示
let { tableData, getTableData, pagination } = useTable(api.flash.getBrandList, {
    // keyword: name.value  // 可以删掉 name.value 不是一个响应式数据
    pageSize: 5,
    // pageNum:1,
    keyword: name// name 是响应式的
})
getTableData()
// console.log(tableData);
// console.log(pagination);

let onSearch = () => {
    // console.log(name);
    getTableData()
}

//分页
const handleSizeChange = (val: number) => {
    getTableData()
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    getTableData()
    console.log(`current page: ${val}`)
}


// 全选
interface User {
    date: string
    name: string
    address: string
}
// const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}
</script>

<style lang="scss" scoped>
.el-input__inner {
    margin-bottom: 30px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
}

.pager {
    display: flex;
    justify-content: right;

    margin: 10px;
}
</style>